<template>
    <el-card>
        <div>
            <div v-for="p in state" :key="p.id">
                <div class="all">
                    <el-checkbox v-model="p.isCheckAll" :indeterminate="p.isIndeterminate"
                        @change="checkAllChange(p)">{{ p.name }}</el-checkbox>
                </div>
                <el-checkbox-group v-model="p.checkeds" @change="gourpChange(p)">
                    <el-checkbox v-for="c in p.children" :key="c.id" :label="c.id">{{ c.name }}</el-checkbox>
                </el-checkbox-group>
            </div>
            <div class="flex">
                <el-button>清空</el-button>
                <el-button type="primary" @click="clickHandle">确定</el-button>
            </div>
        </div>
    </el-card>
</template>
<script setup lang='ts'>
import { useRoute } from 'vue-router';
import { allocResourceApi, getRourceListByRoleIdApi, resourceCategoryAllApi, resourceListAllApi } from './api';
import { ref } from "vue"
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from "vue-router"

type IState = IResourceCategoryModel & { children: IResourceModel[]; checkeds: number[]; isCheckAll: boolean; isIndeterminate: boolean }
const route = useRoute();
const router = useRouter();
let state = ref<IState[]>([])
if (route.query.id) {
    Promise.all([resourceCategoryAllApi(), resourceListAllApi(), getRourceListByRoleIdApi(parseInt(route.query.id as string))]).then((res) => {
        state.value = res[0].data.map(item => ({
            ...item,
            children: [],
            checkeds: [],
            isCheckAll: false,
            isIndeterminate: false
        }))
        res[1].data.forEach((resource) => {
            const cate = state.value.find((cate) => cate.id === resource.categoryId)
            cate && cate.children.push(resource)
        })
        res[2].data.forEach(item => {
            const pp = state.value.find(p => p.id === item.categoryId)
            pp?.checkeds.push(item.id)
        })
        state.value.forEach((pp) => {
            pp.isCheckAll = pp.checkeds.length === pp.children.length
            pp.isIndeterminate = pp.checkeds.length > 0 && pp.checkeds.length < pp.children.length
        })
    }).catch(() => { })
}
const checkAllChange = (data: IState) => {
    if (!data.isCheckAll) {
        data.checkeds = []
    } else {
        data.checkeds = data.children.map((item) => item.id)
    }
    data.isCheckAll = data.checkeds.length === data.children.length
    data.isIndeterminate = data.checkeds.length > 0 && data.checkeds.length < data.children.length
}
const gourpChange = (data: IState) => {
    data.isCheckAll = data.checkeds.length === data.children.length
    data.isIndeterminate = data.checkeds.length > 0 && data.checkeds.length < data.children.length
}
const clickHandle = () => {
    ElMessageBox.confirm('此操作将删除当前用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        allocResourceApi({
            roleId: parseInt(route.query.id as string),
            resourceIds: state.value.reduce<number[]>((pros, next) => {
                return pros.concat(next.checkeds)
            }, [])
        })
        ElMessage.success("保存成功")
        router.push("/ums/role")
    }).catch(() => { })
}
</script>
<style lang="scss" scoped>
.all {
    padding: 20px;
    background-color: #f2f6fc;

}

:deep(.el-checkbox-group) {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    padding: 20px;
}

.flex {
    padding: 20px;
    display: flex;
    justify-content: center;
}
</style>